<template>
    <view class="notActivity" :style=" { paddingTop: paddingHeight + 'px' } ">
        <nav-bar title="28天打卡"></nav-bar>
        <view class="container">
            <view class="title">
                <view class="l-box" style="width: 292rpx;height: 240rpx;">
                    <u--image :showLoading=" true "
                        src="http://oss.antaimedical.com/images/pro/2024/12/6761212ee4b0be9d444233f1ybODLsi6JPCFbec163d62980481c07a274397b1c24f6.png"
                        width="292rpx" height="240rpx" mode="widthFix"></u--image>
                </view>
                <view class="r-box">
                    <view class="name">{{ userInfo.name }}，</view>
                    <view class="text">您尚未开启28天打卡</view>
                </view>
            </view>
            <view class="p-box">
                <u--image :showLoading=" true "
                @click="handleOpenPunchCardActivity"
                    src="http://oss.antaimedical.com/images/pro/2024/12/676120ebe4b0d615350f30e0GElKa6kbDtJWd5301529a05eb8a34c7ad77a6f956e5b.png"
                    width="100%" height="100rpx" mode="widthFix"></u--image>
                <view class="text">
                    <u--image :showLoading=" true "
                        src="http://oss.antaimedical.com/images/pro/2024/12/6760dfe3e4b0d615350f30ddjqvzMT4db7oaa860878ce269fabd335bb79cd722e795.png"
                        width="48rpx" height="48rpx" mode="widthFix"></u--image>
                    <text>连续打卡 7 天即可获得礼物</text>
                </view>
                <view style="margin-top: 124rpx;" @click="navigate('/pagesB/knowledge/article?id=50')">
                    <u--image :showLoading=" true "
                        src="http://oss.antaimedical.com/images/pro/2024/12/67612110e4b0d615350f30e1O03CL5Gll2Lq22c758b8eda60b6e8499eda0320119fc.png"
                        width="100%" height="164rpx" mode="widthFix"></u--image>
                </view>
                <view style="margin-top: 40rpx;" @click="navigate('/pagesB/knowledge/article?id=51')">
                    <u--image :showLoading=" true "
                        src="http://oss.antaimedical.com/images/pro/2024/12/67612126e4b0d615350f30e2pFLIPqdRPzgP5660b1a6c087a07967cd51e8008281b0.png"
                        width="100%" height="164rpx" mode="widthFix"></u--image>
                </view>
            </view>
            <view class="return-btn" @click=" goBack ">返回</view>
        </view>
    </view>
</template>

<script>
import {mapGetters} from 'vuex'
import {
    openPunchCardActivity
} from '@/api/index.js'
export default {
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            userId: uni.getStorageSync('userId'),

        }
    },
    computed: {
        ...mapGetters({
            userInfo: 'getUserInfo'
        }),
    },
    mounted () {
    },
    methods: {
        handleOpenPunchCardActivity () {
            openPunchCardActivity({ userId: this.userInfo.userId }).then((res) => {
                uni.navigateTo({
                    url: '/pagesB/clockInDay/index'
                })
            })
        },
        navigate (url) {
            uni.navigateTo({
                url
            })
        },
        goBack () {
            uni.navigateBack({
                delta: 1 // 默认值是1，表示回到上一页
            });
        },
    }
}
</script>
<style lang="scss" scoped>
.notActivity {
    background: linear-gradient(351deg, #F5F6FA 0%, #C3C9FF 100%);
    min-height: 100vh;
}

.container {
    padding: 48rpx 0;
    width: 100%;

    .title {
        display: flex;
        align-items: center;
        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 40rpx;
        color: #333333;

        .name,
        .text {
            text-align: left;
        }

        .text {
            margin-top: 18rpx;
        }
    }

    .p-box {
        padding: 0 64rpx;
        margin-top: 64rpx;

        .text {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 22rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
        }
    }

    .return-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        width: calc(100% - 64rpx);
        height: 88rpx;
        background: #545DDE;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        position: fixed;
        bottom: 80rpx;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>
